<template>
  <div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      style="width: 180px; height: 100%; min-height: 92vh;"
      mode="inline"
      theme="dark"
    >
      <a-menu-item key="sub1">
        <template #icon>
          <MailOutlined />
        </template>
        <router-link to="/home/zongjuLianlu">总局链路管理</router-link>
      </a-menu-item>
      <a-menu-item key="sub3">
        <template #icon>
          <SettingOutlined />
        </template>
        <router-link to="/home/neimengLianlu">内蒙链路管理</router-link>
      </a-menu-item>
      <a-menu-item key="sub4">
        <template #icon>
          <SelectOutlined />
        </template>
        <router-link to="/home/guangdongLianlu">广东链路管理</router-link>
      </a-menu-item>
      <a-menu-item key="sub5">
        <template #icon>
          <RocketOutlined />
        </template>
        <router-link to="/home/shanghaiLianlu">上海链路管理</router-link>
      </a-menu-item>
      <a-menu-item key="sub2">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <router-link to="/home/nodeInfo">节点信息管理</router-link>
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined, SelectOutlined, RocketOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    MailOutlined,
    AppstoreOutlined,
    SettingOutlined,
    SelectOutlined,
    RocketOutlined
  },
  setup() {
    const state = reactive({
      selectedKeys: [],
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

